<script setup>
import {ref} from "vue"
import axios from "axios"
import uploadImage from "../../../../public/icons/home/upload_hui.svg"
import video_file from "../../../../public/video/video_file.svg"
import upload_add_hui from "../../../../public/icons/home/upload_add_hui.svg"

const uploadVideoBtn = ref(null)
const uploadVideoMasterBoxRef = ref(null)
const uploadingBoxRef = ref(null)

const type = ref('')
const videoName = ref('')

const formatDateTimeName = ref('')
const formatDateImageFileName = ref('')

function formatDateTime(date) {
  const year = date.getFullYear();
  const month = (date.getMonth() + 1).toString().padStart(2, '0');
  const day = date.getDate().toString().padStart(2, '0');
  const hours = date.getHours().toString().padStart(2, '0');
  const minutes = date.getMinutes().toString().padStart(2, '0');
  const seconds = date.getSeconds().toString().padStart(2, '0');
  return `${year}_${month}_${day}_${hours}_${minutes}_${seconds}`;
}

//点击上传获取视频文件
const changeUploadBtn = async() => {
    const fileHandle = await window.showOpenFilePicker({
        excludeAcceptAllOption: false,
        types: [
            {
                description: '视频文件',
                accept: {
                    'video/*': ['.mp4', '.avi', '.mov']
                },
            },
        ],
    });
    const file = await fileHandle[0].getFile();
    // const filePath = await fileHandle[0]
    console.log(file)
    // console.log('File path:', URL.createObjectURL(file));
    type.value = file.type
    videoName.value = file.name
    if(file.name != null){
        uploadVideoMasterBoxRef.value.style.opacity = 0;
        uploadingBoxRef.value.style.opacity = 1;
    }else{
        uploadVideoMasterBoxRef.value.style.opacity = 1;
        uploadingBoxRef.value.style.opacity = 0;
    }
    const formData = new FormData();
    formData.append('file', file);
    // await axios.post('http://localhost:8091/upload-video',{
        
    // })
    await fetch('http://localhost:8091/upload-video', {
      method: 'POST',
      body: formData
    }).then(res=>{return res.json()}).then(async data=>{
        console.log(data)
        formatDateTimeName.value = await data.now_time
    });

    console.log(formatDateTimeName.value)
    await fetch(`http://localhost:8091/static/json/${formatDateTimeName.value}`).then(res=>{
        return res.json()
    }).then(async data=>{
        console.log(data)
    })
    .catch(err=>console.log(err))
    
}

//点击上传获取图片文件
const uploadFMImageBtn = async() => {
    const fileHandle = await window.showOpenFilePicker({
        excludeAcceptAllOption: false,
        types: [
            {
                description: '图片文件',
                accept: {
                    'image/*': ['.png', '.gif', '.jpeg', '.jpg', '.webp']
                },
            },
        ],
    });
    const file = await fileHandle[0].getFile();
    console.log(file)
    const formData = new FormData();
    formData.append('file', file);
    await fetch('http://localhost:8091/upload-image', {
      method: 'POST',
      body: formData
    }).then(res=>{return res.json()}).then(async data=>{
        console.log(data)
        formatDateTimeName.value = await data
        formatDateImageFileName.value = await data.file_name
    });
    
}
</script>

<template>
    <div class="adminUploadVideoAll">
        <div class="uploadVideoMasterBox" ref="uploadVideoMasterBoxRef">
            <div class="uploadVideoMaster">
                <div class="uploadVideoMasterImageBox">
                    <img :src="uploadImage" alt="" />
                </div>
                <div class="uploadVideoMasterNameBox">
                    <span>{{ "拖拽到此处也可上传" }}</span>
                </div>
                <div class="uploadVideoMasterBtnBox">
                    <div ref="uploadVideoBtn" @click="changeUploadBtn" >{{ "上传视频" }}</div>
                </div>
            </div>
        </div>

        <div class="uploadingBox" ref="uploadingBoxRef">
            <div class="uploadingTitleBox">
                <span class="videoName">{{ videoName }}</span>
                <div class="addVideoBtnBox">
                    <span class="addVideoBtn">{{ "添加视频" }}</span>
                </div>
            </div>
            <div class="upload_file_box">
                <img :src="video_file" alt="" class="upload_image"/>
                <span class="upload_name">{{ videoName }}</span>
                <div class="upload_video_fm" @click="uploadFMImageBtn" v-if="formatDateImageFileName == ''">
                    <div class="upload_video_fm_default_image">
                        <img :src="upload_add_hui" alt="" />
                    </div>
                    <div class="upload_video_fm_default_name">
                        <span>{{ "请添加视频封面" }}</span>
                    </div>
                </div>
                <div class="upload_video_fm" v-else>
                    <img :src="formatDateImageFileName" alt="" class="you_fm_image"/>
                    <div class="upload_video_fm_btnBox">
                        <div class="left_btn">
                            <span @click="uploadFMImageBtn">{{ "更改封面" }}</span>
                        </div>
                        <div class="upload_video_fm_fengeBox">
                            <div class="upload_video_fm_fenge"></div>
                        </div>
                        <div class="right_btn">
                            <span>{{ "封面模板" }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped>
.adminUploadVideoAll{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.uploadVideoMasterBox{
    position: absolute;
    left: 200px;
    top: 100px;
    width: 600px;
    height: 300px;
    border: 3px dashed rgba(0, 0, 0,.6);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.5s;
}
.uploadVideoMasterBox img{
    width: 100%;
    height: 100%;
}
.uploadVideoMaster{
    width: 70%;
    height: 80%;
}
.uploadVideoMasterImageBox{
    width: 100%;
    height: 20%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.uploadVideoMasterNameBox{
    width: 100%;
    height: 20%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.uploadVideoMasterNameBox span{
    color: #aaa;
}
.uploadVideoMasterImageBox img{
    width: 10%;
    height: 80%;
}
.uploadVideoMasterBtnBox{
    width: 100%;
    height: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.uploadVideoMasterBtnBox div{
    width: 60%;
    height: 40%;
    outline: none;
    border: 1px solid rgb(0, 150, 200);
    border-radius: 10px;
    background-color: rgb(0, 150, 200);
    color: #fff;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
}

.uploadingBox{
    width: 100%;
    height: 20%;
    transition: all 0.3s;
    opacity: 0;
}
.uploadingTitleBox{
    width: 100%;
    height: 40%;
    background-color: #fff;
    border-bottom: 2px solid #888;
    display: flex;
}
.uploadingTitleBox .videoName{
    margin-left: 20px;
    width: 15%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.addVideoBtnBox{
    width: 10%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.addVideoBtn{
    width: 70%;
    height: 70%;
    background: rgb(0, 150, 200);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    border-radius: 6px;
}
.upload_file_box{
    width: 100%;
    height: 100%;
}
.upload_image{
    position: absolute;
    left: 50px;
    top: 105px;
    width: 70px;
    height: 150px;
}
.upload_name{
    position: absolute;
    left: 150px;
    top: 150px;
    width: 30%;
    height: 20%;
}
.upload_video_fm{
    position: absolute;
    left: 200px;
    top: 250px;
    width: 300px;
    height: 200px;
    border: 2px dashed #aaa;
    cursor: pointer;
    border-radius: 10px;
}
.upload_video_fm .you_fm_image{
    width: 100%;
    height: 100%;
    border-radius: 10px;
}
.upload_video_fm_default_image{
    width: 100%;
    height: 70%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.upload_video_fm_default_image img{
    width: 30%;
    height: 80%;
}
.upload_video_fm_default_name{
    position: absolute;
    left: 95px;
    top: 120px;
    width: 100%;
    height: 30%;
}
.upload_video_fm_default_name span{
    font-size: 15px;
    color: #888;
}

.upload_video_fm_btnBox{
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 20%;
    background: rgba(0, 0, 0,.6);
    display: flex;
    align-items: center;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}
.left_btn,
.right_btn{
    width: 47%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.left_btn span,
.right_btn span{
    color: rgb(195, 195, 195);
    user-select: none;
    /* transition: all 0.2s; */
    /* z-index: 5; */
}
.left_btn span:hover,
.right_btn span:hover{
    color: rgb(180, 180, 180);
}
.upload_video_fm_fengeBox{
    width: 6%; 
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.upload_video_fm_fenge{
    width: 1%;
    height: 60%;
    background: rgba(200, 200, 200, 1);
}
</style>